<template>
    <div class="page">
      <Layout class="manage-layout">
        <Header class="manage-layout-header">
          <div class="manage-layout-logo">PILIPILI后台管理</div>
          <Dropdown class="manage-dropdown-loginedUser" @on-click="clickMenu">
            <a href="javascript:void(0)">
              <span>{{loginedUser}}</span>
              <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list" style="width: 150px;">
              <DropdownItem name="注销">注销</DropdownItem>
              <DropdownItem name="返回主页">返回主页</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </Header>
        <Layout>
        <Sider>
          <Menu theme="dark" width="auto"  accordion @on-select="handleSelect">
            <Submenu name="contentManage">
              <template slot="title">
                <Icon type="ios-paper" />
                审核管理
              </template>
              <MenuItem name="videoAudit"><Icon type="ios-videocam" />视频审核</MenuItem>
              <MenuItem name="commentManage"><Icon type="ios-chatbubbles" />评论审核</MenuItem>
            </Submenu>
            <MenuItem name="roleManage" v-if="roleManage">
              <Icon type="ios-body" />
              <span>角色管理</span>
            </MenuItem>
            <MenuItem name="permissionManage" v-if="permissionManage">
              <Icon type="ios-unlock" />
              <span>权限管理</span>
            </MenuItem>
          </Menu>
          <div slot="trigger"></div>
        </Sider>
        <Content>
          <router-view></router-view>
        </Content>
        </Layout>
      </Layout>
    </div>
</template>

<script>
  import ManageService from '@/services/ManageService'
  import AuthPermissionService from '@/services/AuthPermissionService'
  import cookies from 'js-cookie'
    export default {
        name: "ManageComponent",
        data() {
          return {
            loginedUser: "",
            manageService:null,
            authPermissionService: null,
            roleManage:false,
            permissionManage:false,
            videoAudit:false
          };
        },
      created(){
        this.init();
      },
      methods: {
          init(){
            this.manageService = new ManageService(this);
            this.authPermissionService = new AuthPermissionService(this);
            this.loginedUser = cookies.get("userName");
            this.authPermissionService.manageAuth(function (_this, result) {
              if(result == false){
                _this.$router.push({path:'/noAuth'}) ;
              }
            });
            this.authPermissionService.videoAuditAuth(function (_this, result) {
              _this.videoAudit = result;
            });
            this.authPermissionService.roleAuth(function (_this, result) {
              _this.roleManage = result;
            });
            this.authPermissionService.permissionAuth(function (_this, result) {
              _this.permissionManage = result;
            });
          },
          clickMenu(name){
            if(name == "注销"){
              this.manageService.logout();
            }
            if(name == '返回主页'){
              this.$router.push({path:'/index'});
            }
          },
          handleSelect(name){
              this.$router.push({path:'/manage/' + name});
          }
          // test(){
          //   // console.log(123456)
          //     this.authPermissionService.roleAuth(function (_this, result) {
          //       _this.roleManage = result;
          //     });
          // }
      }
    }
</script>

<style scoped>

  .page {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 1080px;
  }

  .manage-layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
  }

  .manage-layout-header{
    background-color: #3c455b;
    height: 100px;
    color: white;
  }

  .manage-layout-logo{
    width: 200px;
    height: 100px;
    border-radius: 3px;
    float: left;
    position: relative;
    color: white;
    line-height: 100px;
    font-size: 20px;
  }
  .manage-dropdown-loginedUser{
    float: right;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    margin-top: 25px;
  }
</style>
